<template>
<form>
  <view class="cu-form-group">
    <view class="title">{{mobileTitle}}</view>
    <input :placeholder="mobilePlaceholder" name="mobile" @input="mobileInput" :value="mobile" :disabled="mobileInputDisabled" :maxlength="11"/>
  </view>
  <view class="cu-form-group" v-if="hasCaptcha">
    <view class="title">{{captchaTitle}}</view>
    <input :placeholder="captchaPlaceholder" name="captcha" @input="captchaInput" :value="captcha" :maxlength="4"/>
    <view class="captcha-box flex align-center justify-center text-xl" v-if="!captchaSrc" @tap="refreshCaptcha">
      <text class="cuIcon-refresh text-white"></text>
    </view>
    <image class="captcha-box" v-if="captchaSrc" :src="captchaSrc" mode="scaleToFill" @tap="refreshCaptcha"></image>
  </view>
  <view class="cu-form-group border-bottom">
    <view class="title">{{smsCodeTitle}}</view>
    <input :placeholder="smsCodePlaceholder" name="smsCode" @input="smsCodeInput" :value="smsCode" :maxlength="6"/>
    <view class="text-orange border-left padding-left" @tap="sentSmsCode">{{smsText}}</view>
  </view>
</form>
</template>

<script>
export default {
  name: 'security-code', // 手机+手机验证码+图片验证码
  data () {
    return {
      img_base64: '', // 验证码图片的base64编码，请开发者还原图片(需要拼接base64头部)
      captchaid: '', // 本次验证码的标识，在登陆传参需要带上
      mobile: '',
      smsCode: '',
      captcha: '',
      smsText: '获取验证码',
      countdown: 30,
      countdownTimer: null
    }
  },
  props: {
    event: {
      type: String,
      default: ''
    },
    /** 图形验证码 */
    hasCaptcha: {
      type: Boolean,
      default: false
    },
    mobileTitle: {
      type: String,
      default: '手机号码'
    },
    mobilePlaceholder: {
      type: String,
      default: '请输入手机号码'
    },
    mobileInputDisabled: {
      type: Boolean,
      default: false
    },
    captchaTitle: {
      type: String,
      default: '图形验证码'
    },
    captchaPlaceholder: {
      type: String,
      default: '请输入图形验证码'
    },
    smsCodeTitle: {
      type: String,
      default: '手机验证码'
    },
    smsCodePlaceholder: {
      type: String,
      default: '请输入验证码'
    }
  },
  computed: {
    captchaSrc() {
      return `data:image/jpeg;base64,${this.img_base64}`
    },
    smsCodeParams() {
      return {
        mobile: this.mobile,
        event: this.event,
        captchaid: this.captchaid,
        captcha: this.captcha
      }
    }
  },
  beforeDestroy() {
    this.clearTimer()
  },
  created() {
    this.getCaptcha()
  },
  methods: {
    mobileInput(e) {
      this.mobile = e.detail.value
      this.triggerChangeEvent()
    },
    captchaInput(e) {
      this.captcha = e.detail.value
      this.triggerChangeEvent()
    },
    smsCodeInput(e) {
      this.smsCode = e.detail.value
      this.triggerChangeEvent()
    },
    refreshCaptcha() {
      console.log('刷新图片验证码')
      this.getCaptcha()
    },
    sentSmsCode() {
      if (this.countdownTimer !== null) return
      console.log('smsCodeParams', this.smsCodeParams)
      // TODO 发送获取验证码请求
      this.$api.sendSmsCode(this.smsCodeParams).then(res => {
        console.log('获取验证码', res)
        if (!res) return
        const { msg } = res
        this.$showTipsToast(msg)
        this.startCountdown()
      })
    },
    startCountdown() {
      this.countdownTimer = setInterval(() => {
        this.countdown--
        if (this.countdown > 0) {
          this.smsText = `重新获取(${this.countdown}s)`
        } else {
          this.clearTimer()
          this.smsText = '重新获取'
        }
      }, 1000)
    },
    clearTimer() {
      if (this.countdownTimer === null) return
      clearInterval(this.countdownTimer)
      this.countdownTimer = null
      this.countdown = 30
    },
    triggerChangeEvent() {
      let params = {
        mobile: this.mobile,
        smsCode: this.smsCode
      }
      if (this.hasCaptcha) {
        params.captchaid = this.captchaid
        params.captcha = this.captcha
      }
      this.$emit('onChange', params)
    },
    /** 获取图形验证码 */
    getCaptcha() {
      this.$api.getCaptcha().then(res => {
        console.log('获取图形验证码', res)
        if (!res) return
        const {img_base64, captchaid} = res.data
        this.img_base64 = img_base64
        this.captchaid = captchaid
      })
    }
  }
}
</script>

<style lang="less">
.cu-form-group .title { // 统一form内的title宽度
  min-width: calc(4em + 30px);
}

.captcha-box {
  width: 160rpx;
  height: 60rpx;
  background-color: #d9d9d9;

  &.img {
    width: 100%;
  }
}
</style>
